<template>
	<view class="register">
		<view class="welcome">打开新世界的大门！</view>
		<u-input class="userId" v-model="username" type="text" :border="true" placeholder="请输入账号" />
		<u-input class="userPwd" v-model="password" type="password" :border="true" :password-icon="true" placeholder="请输入密码" />
		<u-input class="check" v-model="password2" type="password" :border="true" :password-icon="true" placeholder="请再次输入密码" />

		<view class="uploader" ref="input"><u-upload class="myimg" :action="action" :file-list="fileList" name="files" max-count="1" @on-success="success"></u-upload></view>

		<view class="button" @click="register()">注册</view>
		<view class="bottom">
			已有账号？
			<text style="color: blue;" @click="toLogin()">马上登录</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { insertUserApi } from '@/api/user';
import { uploadApi } from '@/api/file';
import { pubUrl } from '@/api/http';
export default {
	data() {
		return {
			password: '123456',
			password2: '123456',
			username: 'admin',
			type: 'text',
			action: 'http://localhost:8888/ruan/file/upload',
			imgSrc: 'https://img01.yzcdn.cn/vant/cat.jpeg',
			uploaderReturnSrc: '',
			fileList: [],
			imgUrl: ''
		};
	},
	methods: {
		success(data, index, lists, name) {
			this.imgUrl = data.data[0].url;
			console.log(this.imgUrl);
		},
		toLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		//注册
		register() {
			if (!this.empty()) {
				return;
			}
			if (this.imgUrl) {
				this.insertUser(this.imgUrl);
			} else {
				this.insertUser();
			}
		},
		insertUser(res = '/0') {
			insertUserApi({
				username: this.username,
				password: this.password,
				nickName: this.username,
				userImg: res,
				gender: 0
			}).then(res => {
				if (res.state == 501) {
					uni.showToast({
						title: res.msg,
						duration: 1000
					});
					return
				}
				this.$router.push('/pages/login/login');
			});
		},
		//判空
		empty() {
			if (!this.username) {
				this.showToast('用户名为空');
				return false;
			}
			if (!this.password) {
				this.showToast('密码为空');
				return false;
			}
			if (!this.password2) {
				this.showToast('密码为空');
				return false;
			}
			if (this.password != this.password2) {
				this.showToast('密两次密码不一致');
				return false;
			}
			return true;
		},
		//提示消息
		showToast(msg) {
			this.$refs.uToast.show({
				title: msg,
				type: 'error'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.uploader {
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 100px;

	.myimg {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}
}
.register {
	.iploadBox {
		position: absolute;
		width: 100%;
		top: 100px;
		display: flex;
		justify-content: center;
	}
	.welcome {
		position: absolute;
		top: 10%;
		left: 30px;
		font-size: 20px;
		color: #475255;
	}
	.bottom {
		position: absolute;
		width: 100%;
		bottom: 5%;
		text-align: center;
		font-size: 12px;
	}
	.button {
		width: 80%;
		position: absolute;
		top: 65%;
		height: 40px;
		border-radius: 20px;
		background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-left: 10%;
	}
	.input {
		position: absolute;
		width: 90%;
		margin-left: 5%;
	}
	.userId {
		.input();
		top: 35%;
	}
	.userPwd {
		top: 45%;
		.input();
	}
	.check {
		top: 55%;
		.input();
	}
}
</style>
